<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div v-if="pageflag" style="height:100%;">
    <div class="left_header">
      <div class="left_header_box" v-for="d in titleList" :key="d.label">
        <div class="left_header_box_title">
          <img src="../../assets/img/titleIcon.png" alt srcset />
          {{ d.label }}
        </div>
        <div class="left_header_box_value">
          <span class="value_total">{{ d.total }}</span>
          <span class="value_text">次</span>
        </div>
        <dv-decoration-2 style="width:100%;height:5px;" />
      </div>
    </div>
    <div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
      <dv-scroll-board v-if="isDataLoad" :config="config" style="width:100%;height:100%" />
    </div>
  </div>

  <Reacquire v-else @onclick="getData" style="line-height: 200px" />
</template>

<script>
import { currentGET, get } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "../../components/kong.vue";
export default {
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      config: {
        headerBGC: "rgba(12,52,101,0.68);",
        oddRowBGC: "#13223E",
        evenRowBGC: "#172641",
        header: ["名称", "所属地市", "类别", "创建时间"],
        columnWidth: [220, 120, 80, 150],
        data: []
      },
      titleList: [
        { label: "低风险", total: 12480, list: [] },
        { label: "一般风险", total: 38910, list: [] },
        { label: "较大风险", total: 2908, list: [] },
        { label: "重大风险", total: 2908, list: [] }
      ],
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 240,
        limitMoveNum: 5,
        step: 0
      },
      typeDict: [
        { label: "低风险", value: 1 },
        { label: "一般风险", value: 2 },
        { label: "较大风险", value: 3 },
        { label: "重大风险", value: 4 }
      ],
      isDataLoad: false
    };
  },
  props: {
    infoData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    infoData: {
      handler(newData) {
        this.isDataLoad = false
        this.getData(newData); // 重新渲染图表
      },
      deep: true
    }
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    }
  },
  created() {
    this.getData(this.infoData);
  },

  mounted() {
    // this.getData();
  },
  methods: {
    addressHandle(item) {
      let name = item.provinceName;
      if (item.cityName) {
        name += "/" + item.cityName;
        if (item.countyName) {
          name += "/" + item.countyName;
        }
      }
      return name;
    },
    getData(data) {
      this.pageflag = true;
      // this.pageflag =false
      // get("/admin/showData").then(res => {
      //   if (res.code == 200) {
      let dataList = [];
      data.forEach(t => {
        switch (t.type) {
          case "1":
            this.titleList[0].total = t.total;
            this.titleList[0].list = t.data;
            dataList = dataList.concat(t.data);
            break;
          case "2":
            this.titleList[1].total = t.total;
            this.titleList[1].list = t.data;
            dataList = dataList.concat(t.data);
            break;
          case "3":
            this.titleList[2].total = t.total;
            this.titleList[2].list = t.data;
            dataList = dataList.concat(t.data);
            break;
          case "4":
            this.titleList[3].total = t.total;
            this.titleList[3].list = t.data;
            dataList = dataList.concat(t.data);
            break;
          default:
            break;
        }
      });
      this.config= {
        headerBGC: "rgba(12,52,101,0.68);",
        oddRowBGC: "#13223E",
        evenRowBGC: "#172641",
        header: ["名称", "所属地市", "类别", "创建时间"],
        columnWidth: [220, 120, 80, 150],
        data: dataList.map(t => {
          return [t.shopName, t.address, this.typeDict[t.type - 1].label, t.createTime];
        })
      }
      this.isDataLoad = true;
      // this.countUserNumData = res.data;
      // this.list = res.data.list;
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.defaultOption.step = this.$store.state.setting.defaultOption.step;
      }, this.$store.state.setting.defaultOption.waitTime);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning"
      //     });
      //   }
      // });
    }
  }
};
</script>
<style lang='scss' scoped>
::v-deep .rows,
::v-deep .header-item {
  color: #70a9d5;
}

.left_header {
  display: flex;
  margin-bottom: 15px;
}

.left_header_box {
  margin-right: 19px;
  flex: 1;
}

.left_header_box:last-child {
  margin-right: 0;
}

.left_header_box_title {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.left_header_box_value {
  background: #0c3261;
  padding: 11px 17px;
  margin: 8px 0;
}

.value_total {
  color: linear-gradient(0deg, #3996da 0%, #ffffff 100%);
  font-size: 24px;
}

.value_text {
  margin-left: 5px;
}

.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 70%;
}

.doudong {
  //  vertical-align:middle;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;

  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
    margin: 10px 0;

    .orderNum {
      margin: 0 16px 0 -20px;
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      color: #fff;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: $primary-color;
        font-size: 15px;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 380px;
      flex-shrink: 0;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url("../../assets/img/zuo_xuxian.png");
        bottom: -10px;
        left: -2%;
        background-size: cover;
      }

      .addresswrap {
        width: 100%;
        display: flex;
        margin-top: 8px;
      }
    }

    .wangguan {
      color: #1890ff;
      font-weight: 900;
      font-size: 15px;
      width: 80px;
      flex-shrink: 0;
    }

    .time {
      font-size: 12px;
      // color: rgba(211, 210, 210,.8);
      color: #fff;
    }

    .address {
      font-size: 12px;
      cursor: pointer;
      // @include text-overflow(1);
    }

    .types {
      width: 30px;
      flex-shrink: 0;
    }

    .typeRed {
      color: #fc1a1a;
    }

    .typeGreen {
      color: #29fc29;
    }
  }
}
</style>